<template>
  <el-container class="container">
    <headerVue></headerVue>
    <el-main>
      <el-scrollbar>
        <el-tabs
          v-model="editableTabsValue"
          type="card"
          @tab-click="handleClick"
          class="demo-tabs"
          @edit="handleTabsEdit"
        >
          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.path"
            :label="item.title"
            :name="item.name"
          >
            <!-- {{ item.content }} -->
            <router-view></router-view>
          </el-tab-pane>
        </el-tabs>
        <!-- <router-view></router-view> -->
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import headerVue from "./header.vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import type { TabsPaneContext } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from 'pinia';
import { useStore } from "../../store/index";
const store = useStore();
const router=useRouter()
// console.log(store.count,'store');
let {editableTabs,editableTabsValue}=storeToRefs(store)

interface item {
  title: string;
  name: string;
  path:string;
}
type dataType = {
  editableTabsValue: string;
  // editableTabs: Array<item>;
};
let tabIndex = 2;
let data = reactive<dataType>({
  editableTabsValue: "2",
  // editableTabs: [],
});
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name, event);
  
  
  // return
  router.push({
    path:tab.props.name as string
  })
};
const handleTabsEdit = (targetName: string, action: "remove" | "add") => {
  
  if (action === "add") {
    console.log('add');
    
  } else if (action === "remove") {
    console.log('remove');
  }
};
</script>

<style scoped>
.container {
  flex-direction: column;
}
</style>